<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <script type="text/javascript" src="libs/jquery.min.js"></script>
    <script type="text/javascript" src="layui/layui.js"></script>

    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<!--<div class="layui-header"></div>-->
<!--导航栏-->
<ul class="layui-nav" style="background-color: #202020">
    <li class="layui-nav-item" style="width: 5%"></li>
    <li class="layui-nav-item" style="width: 13%" value="logo"><a href=""><img src="imgs/brand/yoyoga.png"
                                                                               style="height: 50px"></a></li>
    <li class="layui-nav-item" style="width: 12%"></li>
    <li class="layui-nav-item" style="text-align: center;width: 8%"><a href="">主页</a></li>
    <li class="layui-nav-item" style="text-align: center;width: 8%">
        <a href="#">介绍</a>
        <dl class="layui-nav-child">
            <dd><a href="">瑜伽好处</a></dd>
            <dd><a href="">瑜伽流派</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item" style="text-align: center;width: 8%"><a href="">场馆</a></li>
    <li class="layui-nav-item" style="text-align: center;width: 8%">
        <a href="#">教练</a>
        <dl class="layui-nav-child">
            <dd><a href="">移动模块</a></dd>
            <dd><a href="">后台模版</a></dd>
            <dd class="layui-this"><a href="">选中项</a></dd>
            <dd><a href="">电商平台</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item" style="text-align: center;width: 8%"><a href="">社区</a></li>


    <li class="layui-nav-item" style="float: right">
        <a href="#"><img src="//t.cn/RCzsdCq" class="layui-nav-img">我</a>
        <dl class="layui-nav-child">
            <dd><a href="#">个人主页</a></dd>
            <dd><a href="#">修改信息</a></dd>
            <dd><a href="#">我的钱包</a></dd>
            <dd><a href="#">我的好友</a></dd>
            <dd><a href="#">退出</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item"  style="float: right">
        <a href="">我的订单</a>
    </li>
    <li class="layui-nav-item" style="float: right">
        <a href="">消息<span class="layui-badge-dot"></span></a>
    </li>

    <!--<li class="layui-nav-item" style="float: right">-->
        <!--<a href="">注册</a>-->
    <!--</li>-->
    <!--<li class="layui-nav-item" style="float: right"><span style="color: #cccccc">|</span></li>-->
    <!--<li class="layui-nav-item" style="float: right">-->
        <!--<a href="">登陆</a>-->
    <!--</li>-->
</ul>
<!--<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>常规轮播</legend>
</fieldset>-->
<!--<div class="layui-carousel" id="test2" style="width: 100%">-->
<!--<div carousel-item="">-->
<!--<div>条目1</div>-->
<!--<div>条目2</div>-->
<!--</div>-->
<!--</div>-->
<!--轮播图-->
<div class="layui-carousel" id="test10" style="z-index: 1">
    <div carousel-item="">
        <div><img src="imgs/bg/b1.jpg" width="100%"></div>
        <div><img src="imgs/bg/b2.jpg" width="100%"></div>
        <div><img src="imgs/bg/b3.jpg" width="100%"></div>
        <div><img src="imgs/bg/b4.jpg" width="100%"></div>
        <div><img src="imgs/bg/b5.jpg" width="100%"></div>
        <div><img src="imgs/bg/b6.jpg" width="100%"></div>
    </div>
</div>
<!--<div style="float: left;position: absolute;z-index: 99"><img src="imgs/brand/yoyoga.png"></div>-->
<div style="padding: 20px; background-color: #dddddd;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md8">
            <div class="layui-card">
                <blockquote class="layui-elem-quote"><p style="font-size: 20px;font-weight: bolder">&nbsp;热点</p>
                </blockquote>
                <div class="layui-card-body">
                    <div class="layui-col-md12" style="height: 120px;line-height: 120px">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <img src="imgs/index/r1.jpg" style="height: 90%;border-radius: 3px  ">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <a style="font-size: 25px" href="paging/page1.html">为什么30岁~50岁后的人，都被建议练习瑜伽？</a>
                    </div>
                    <div class="layui-col-md12" style="height: 120px;line-height: 120px">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <img src="imgs/index/r2.jpg" style="height: 90%;border-radius: 3px  ">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <a style="font-size: 25px" href="paging/page2.html">瑜伽手印对生活和写作有什么帮助？</a>
                    </div>
                    <div class="layui-col-md12" style="height: 120px;line-height: 120px">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <img src="imgs/index/r3.jpg" style="height: 90%;border-radius: 3px  ">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <a style="font-size: 25px" href="paging/page4.html">与萌宠们零距离接触，网友：我柔韧度还不如一条狗</a>
                    </div>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-card">
                <blockquote class="layui-elem-quote"><p style="font-size: 20px;font-weight: bolder">&nbsp;推荐</p>
                </blockquote>
                <div class="layui-card-body">
                    <div class="layui-col-md12" style="height: 180px">
                        <a href="paging/page3.html"><img src="imgs/index/t1.jpg" style="height: 95%;width: 100%;border-radius: 3px"></a>
                    </div>
                    <div class="layui-col-md6" style="height: 180px">
                        <a href="https://www.yujia.com/article/11565"><img src="imgs/index/t2.jpg" style="height: 95%;width: 99%;border-radius: 3px"></a>
                    </div>
                    <div class="layui-col-md6" style="height: 180px">
                        <a href="http://www.yujiame.com/jiaoxue/20164947.html"><img src="imgs/index/t3.jpg" style="height: 95%;width: 100%;border-radius: 3px"></a>
                    </div>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-card">
                <blockquote class="layui-elem-quote"><p style="font-size: 20px;font-weight: bolder">&nbsp;瑜伽知识</p>
                </blockquote>
                <div class="layui-card-body">
                    <div class="layui-col-md12" style="height: 95px;line-height: 95px">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <img src="imgs/index/1.jpg" style="height: 90%;width: 30%;border-radius: 3px  ">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <a style="font-size: 15px" href="http://www.yujiame.com/changshi/20164995.html">流瑜伽这样练才能保护你的手腕</a>
                    </div>
                    <div class="layui-col-md12" style="height: 95px;line-height: 95px">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <img src="imgs/index/2.jpg" style="height: 90%;width: 30%;border-radius: 3px  ">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <a style="font-size: 15px" href="http://www.yujiame.com/changshi/20164932.html">关于瑜伽的四个问题，你知道答案么？</a>
                    </div>
                    <div class="layui-col-md12" style="height: 95px;line-height: 95px">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <img src="imgs/index/3.jpg" style="height: 90%;width: 30%;border-radius: 3px  ">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <a style="font-size: 15px" href="">瑜伽平衡到底有多重要？</a>
                    </div>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-card">
                <blockquote class="layui-elem-quote"><p style="font-size: 20px;font-weight: bolder">&nbsp;瑜伽流派</p>
                </blockquote>
                <div class="layui-card-body">
                    <div class="layui-col-md12" style="height: 95px;line-height: 95px">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <img src="imgs/index/g1.jpg" style="height: 90%;width: 30%;border-radius: 3px  ">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <a style="font-size: 15px" href="http://yujia.baike.com/article-11097.html">瑜伽三大流派之——业瑜伽</a>
                    </div>
                    <div class="layui-col-md12" style="height: 95px;line-height: 95px">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <img src="imgs/index/g2.jpg" style="height: 90%;width: 30%;border-radius: 3px  ">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <a style="font-size: 15px" href="http://yujia.baike.com/article-10635.html">瑜伽三大流派之——智瑜伽</a>
                    </div>
                    <div class="layui-col-md12" style="height: 95px;line-height: 95px">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <img src="imgs/index/g3.jpg" style="height: 90%;width: 30%;border-radius: 3px  ">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <a style="font-size: 15px" href="">瑜伽三大流派之——奉爱瑜伽</a>
                    </div>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-card">
                <blockquote class="layui-elem-quote"><p style="font-size: 20px;font-weight: bolder">&nbsp;饮食知识</p>
                </blockquote>
                <div class="layui-card-body">
                    <div class="layui-col-md12" style="height: 95px;line-height: 95px">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <img src="imgs/index/f1.jpg" style="height: 90%;width: 30%;border-radius: 3px  ">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <a style="font-size: 15px" href="https://www.hiyd.com/yingyang/1901.html">用手掌控制饮食量，简简单单吃出健康</a>
                    </div>
                    <div class="layui-col-md12" style="height: 95px;line-height: 95px">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <img src="imgs/index/f2.jpg" style="height: 90%;width: 30%;border-radius: 3px  ">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <a style="font-size: 15px" href="https://www.hiyd.com/jianshengyinshi/1850.html">有助于瘦身的4种食材,这个夏天要多吃</a>
                    </div>
                    <div class="layui-col-md12" style="height: 95px;line-height: 95px">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <img src="imgs/index/f3.jpg" style="height: 90%;width: 30%;border-radius: 3px  ">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <a style="font-size: 15px" href="https://www.hiyd.com/jianshengyinshi/1851.html">瑜伽前，瑜伽中，瑜伽后的进食方法</a>
                    </div>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <blockquote class="layui-elem-quote"><p style="font-size: 20px;font-weight: bolder">&nbsp;明星教练</p>
                </blockquote>
                <div class="layui-card-body">
                    <div class="layui-col-md12" style="height: 200px">
                        <a href=""><img src="imgs/index/j1.jpg" style="height: 95%;width: 100%;border-radius: 3px  "></a>
                    </div>
                    <div class="layui-col-md12" style="height: 200px">
                        <a href=""><img src="imgs/index/j2.jpg" style="height: 95%;width: 100%;border-radius: 3px  "></a>
                    </div>
                    <div class="layui-col-md12" style="height: 200px">
                        <a href=""><img src="imgs/index/j3.jpg" style="height: 95%;width: 100%;border-radius: 3px  "></a>
                    </div>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <blockquote class="layui-elem-quote"><p style="font-size: 20px;font-weight: bolder">&nbsp;优秀场馆</p>
                </blockquote>
                <div class="layui-card-body">
                    <div class="layui-col-md12" style="height: 300px">
                        <a href=""><img src="imgs/index/c1.jpg" style="height: 97%;width: 100%;border-radius: 3px  "></a>
                    </div>
                    <div class="layui-col-md12" style="height: 300px">
                        <a href=""><img src="imgs/index/c2.jpg" style="height: 97%;width: 100%;border-radius: 3px  "></a>
                    </div>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                </div>
            </div>
        </div>
    </div>
</div>
<!--下边栏-->
<div class="layui-footer layui-container" style="width: 100%;height: 250px;background-color: #202020">
    <img src="imgs/brand/yoyoga.png" alt="" style="width: 20%;margin-left: 40%;margin-top: 50px"/>
    <p style="font-size: large;width: 10%;margin-left: 44.5%;margin-top: 10px;text-align: center"><a href="index.html" style="color: #777777">www.yoyoga.com</a></p>
    <div class="layui-copy">
        <p style="font-size: 14px;color: #777777;width: 30%;margin-left: 40%;margin-top: 20px">© 2019 All Rights Reseved Template by esyoga </p>
    </div>
</div>

<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use(['element', 'layer'], function () {
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
        var layer = layui.layer;

        //监听导航点击
        element.on('nav(demo)', function (elem) {
            //console.log(elem)
            layer.msg(elem.text());
        });
    });
    layui.use(['carousel', 'form'], function () {
        var carousel = layui.carousel
            , form = layui.form;

        //图片轮播
        carousel.render({
            elem: '#test10'
            , interval: 3000
            , anim: 'fade'
            , width: '100%'
            , height: '700px'
        });


        var $ = layui.$, active = {
            set: function (othis) {
                var THIS = 'layui-bg-normal'
                    , key = othis.data('key')
                    , options = {};

                othis.css('background-color', '#5FB878').siblings().removeAttr('style');
                options[key] = othis.data('value');
                ins3.reload(options);
            }
        };

        //监听开关
        form.on('switch(autoplay)', function () {
            ins3.reload({
                autoplay: this.checked
            });
        });

        $('.demoSet').on('keyup', function () {
            var value = this.value
                , options = {};
            if (!/^\d+$/.test(value)) return;

            options[this.name] = value;
            ins3.reload(options);
        });

        //其它示例
        $('.demoTest .layui-btn').on('click', function () {
            var othis = $(this), type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });
    });
</script>

</body>